
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Magic_shop-注册</title>
    <link rel="shortcut icon" href="./faviconcoffee.ico" />
    <link rel="stylesheet" th:href="@{../../mall/css/common.css}">
    <link rel="stylesheet" th:href="@{../../mall/styles/register.css}">
    <link rel="stylesheet" th:href="@{../../mall/styles/header.css}">
    <link rel="stylesheet" th:href="@{../../mall/styles/layout/header-simple.css}">
    <link rel="stylesheet" th:href="@{/admin/plugins/sweetalert/sweetalert.css}"/>
</head>
<body>
<div th:replace="mall/header-simple::header-simple-fragment"></div>
<div class="form center">
    <div class="register">
        <div class="login_center">
            <div class="login_top">
                <div class="left fl">会员注册</div>
                <div class="right fr">您已有账号？<a href="login.html" target="_self">请登录</a></div>
                <div class="clear"></div>
                <div class="under-line center"></div>
            </div>
            <form id="registerForm" onsubmit="return false;" action="##">
                <div class="login_main center">
                    <div class="login-info"><span class="login-info-label">用户名:&nbsp;</span><input class="login-info-input" type="text" name="username"
                                                             placeholder="请输入你的用户名" id="username"/>
                    </div>
                    <div class="login-info"><span class="login-info-label">密&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;</span><input class="login-info-input"
                                                                                    type="password"
                                                                                    name="password"
                                                                                    id="password"
                                                                                    placeholder="请输入你的密码"/>
                    </div>
                    <div class="login-info"><span class="login-info-label">验证密码:&nbsp;</span><input class="login-info-input"
                                                                                     type="password"
                                                                                     name="password-confirm"
                                                                                     id="password-confirm"
                                                                                     placeholder="请再次确认你的密码"/>
                     </div>
                    <div class="login-info"><span class="login-info-label">电话:&nbsp;</span><input class="login-info-input" type="text" name="phone"
                                                             placeholder="请输入你的手机号码" id="phone"/>
                    </div>
                    <div class="login-info"><span class="login-info-label">邮箱:&nbsp;</span><input class="login-info-input" type="text" name="email"
                                                             placeholder="请输入你的邮箱" id="email"/>
                    </div>
                    <div class="login-info"><span class="login-info-label">密码问题:&nbsp;</span><input class="login-info-input" type="text" name="question"
                                                             placeholder="请输入你的密码提示问题" id="question"/>
                    </div>
                    <div class="login-info"><span class="login-info-label">密码答案:&nbsp;</span><input class="login-info-input" type="text" name="answer"
                                                             placeholder="请输入你的密码问题答案" id="answer"/>
                    </div>
                </div>
                <div class="login_submit">
                    <input class="submit" type="button" onclick="register()" value="立即注册">
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<!-- jQuery -->
<!--<script th:src="@{/admin/plugins/jquery/jquery.min.js}"></script>-->
<script th:src="@{/admin/plugins/jquery/jquery-3.5.1.min.js}"></script>
<script th:src="@{/admin/dist/js/public.js}"></script>
<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
<script type="text/javascript">

    //部署时未开发注册方法
    function register2() {
        swal('未开放，请联系作者获得测试账号', {
            icon: "error",
        });
    }

    // 异步验证username
    $(function () {
    $("#username").blur(function (){
        var username = $("#username").val();
        if (username == null){
            return;
        }
        var url = '/check_username';
        $.ajax({
            type: 'POST',//方法类型
            url: url,
            data: {username:username},
            success: function (result) {
                if (result.resultCode == 500) {
                    swal('用户名已存在', {
                        icon: "error",
                    });
                }else{

                };
            },
            error: function () {
                swal("操作失败", {
                    icon: "error",
                });
            }
        });
    });
    });
    //注册按钮onclick事件改为register()即可
    function register() {
        var username = $("#username").val();
        if (!validUserName(username)) {
            swal('请输入正确的登录名(4到16位字母，数字，下划线，减号)', {
                icon: "error",
            });
            return false;
        }
        var password = $("#password").val();
        if (!validPassword(password)) {
            swal('请输入正确的密码格式(6-20位字符和数字组合)', {
                icon: "error",
            });
            return false;
        }
        var passwordConfirm = $("#password-confirm").val();
        if (!validPassword(passwordConfirm)) {
            swal('请输入正确的密码格式(6-20位字符和数字组合)', {
                icon: "error",
            });
            return false;
        }
        // 验证二次密码
        if (password != passwordConfirm) {
            swal('两次密码输入不正确！', {
                icon: "error",
            });
            return false;
        }
        var phone = $("#phone").val();
        if (!validPhoneNumber(phone)) {
            swal('请输入11位的手机号或检查你的手机号码格式', {
                icon: "error",
            });
            return false;
        }
        var email = $("#email").val();
        if (!validEmail(email)) {
            swal('请输入正确的邮箱格式', {
                icon: "error",
            });
            return false;
        }
        var question = $("#question").val();
        if (!isNotNull(question)) {
            swal('请输入正确的问题', {
                icon: "error",
            });
            return false;
        }
        var answer = $("#answer").val();
        if (!isNotNull(question)) {
            swal('请输入正确的答案', {
                icon: "error",
            });
            return false;
        }
        //验证
        var params = $("#registerForm").serialize();
        var url = '/register';
        $.ajax({
            type: 'POST',//方法类型
            url: url,
            data: params,
            success: function (result) {
                if (result.resultCode == 200) {
                    swal({
                        title: "注册成功",
                        text: "是否跳转至登录页?",
                        icon: "success",
                        buttons: true,
                    }).then((flag) => {
                            if (flag) {
                                window.location.href = '/login';
                            }
                        }
                    );
                } else {
                    swal(result.message, {
                        icon: "error",
                    });
                }
                ;
            },
            error: function () {
                swal("操作失败", {
                    icon: "error",
                });
            }
        });
    }
</script>
</html>